<template>
  <view class="box project">
    <view class="box-title">项目经验</view>
    <view class="box-item" v-for="projectItem in work_projectArr" :key="projectItem.person_projectId">
      <view class="item-title">
        <text class="icon icon-project"></text>
        <text>{{projectItem.person_projectName}}</text>
      </view>
      <view class="project-time">
        <text>{{projectItem.person_projectstartdate}} - {{projectItem.person_projectstopdate}}</text>
      </view>
      <view class="des">
        <text>{{projectItem.person_projectDesc || ''}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    work_projectArr: {
      type: Array,
      default: () => [],
    }
  }
}
</script>

<style lang="scss" scoped>
$img-base-resume: $img-base + 'resume/';
.item-title {
  margin-bottom: $uni-spacing-col-lg;
  font-size: $uni-font-size-base;
  font-weight: bold;
  color: $uni-text-color-333;
}
.des {
  font-size: $uni-font-size-sm;
  line-height: 38rpx;
  color: $uni-text-color-999;
  white-space: pre-line;
  word-break: break-word;
}
.box {
  margin-bottom: $uni-spacing-col-big;
  padding: $uni-spacing-col-big;
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  &-title {
    margin-bottom: $uni-spacing-col-lg;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    color: #333333;
  }
  .icon {
    width: 36rpx;
    height: 36rpx;
    vertical-align: bottom;
  }
}
.project {
  .icon-project {
    background-image: url($img-base-resume + 'project.png');
  }
  &-time {
    margin-bottom: $uni-spacing-col-lg;
    color: $uni-text-color-999;
  }
}
</style>